/**
 * 麻点图
 */
import sgisLayerBase from "../../sgis.layer.base";
import styleModify from '../macrolayers/echarts.stylemodify.js';

export default {
  layerNum: 0, // 麻点图多能叠加10个，过多时提示移除，防止太卡
  colors: [
    "#EE7600",
    "#88E3CD",
    "#CD8C95",
    "#458B00",
    "#00EE76",
    "#A02395",
    "#00CDCD",
    "#00868B",
    "#CD5555",
    "#FF0000"
  ], // 麻点图配色方案
  /**
   * 创建专题图
   * @param {Object} map 地图实例
   * @param {Object} data 用于创建专题图的数据
   *      {
   *        "id": "", 专题图的id
   *        "name": "", 专题图的名称
   *        "datas": [
   *          {id:"",name:"",lon:"",lat:"",regioncode:"",regionname:""},{}
   *        ]
   *      }
   */

  createLayer(map, data) {
    if (this.layerNum >= 10) {
      alert("麻点图叠加超过限制，请清除结果后重试");
      return;
    }
    let pointColor = this.getColor();
    this.pointColor = pointColor;
    let options = {
      tooltip: {
        // 设置提示窗显示的数据及位置
        position: "top",
        formatter: function (params) {
          return params.name;
        }
      },
      series: [{
        type: "scatter",
        coordinateSystem: "leaflet",
        symbolSize: 8,
        hoverAnimation: true,
        itemStyle: {
          color: pointColor,
          emphasis: {
            color: "red"
          }
        },
        dimensions: ["lon", "lat"],
        data: data.datas
      }]
    }; // 圆的大小 // 鼠标进入时的动态效果 // 颜色要动态改变 // 鼠标进入时的颜色
    let pockingLayer = L.supermap.echartsLayer(options);
    pockingLayer.addTo(map);
    let pockingChart = pockingLayer._ec;
    let popup = L.popup({
      keepInView: false,
      autoClose: false,
      autoPan: true,
      closeButton: false
    });
    pockingChart.on("click", function (params) {
      // 此处查询麻点相信信息并展示
      if (params && params.data) {
        setTimeout(function () {
          popup
            .setLatLng(L.latLng(params.data.lat, params.data.lon))
            .setContent("此处添加查询结果弹窗") // 查询结果弹窗
            .openOn(map);
        }, 0);
      }
    });
    pockingLayer._ec = pockingChart;
    pockingLayer.on("remove", function (es) {
      this.layerRemoveCb(es.target.options.echartsColor);
    });
    this.layerNum++;
    pockingLayer.options.echartsColor = pointColor; // 将本次麻点图使用到的颜色保存起来
    pockingLayer.setVisible = this.setVisible; // 添加设置可见性函数
    pockingLayer.setOpacity = this.setOpacity; // 添加设置图层透明度函数
    pockingLayer.setZIndexOffset = this.setZIndexOffset; // 设置图层顺序函数
    pockingLayer.autoCalgraph = this.autoCalgraph; // 添加计算图例函数
    let pockLayerInfo = {};
    pockLayerInfo.layerId = "markerLayer_" + data.id + new Date().getTime();
    styleModify.onZoomScatter(map, pockingLayer, pockLayerInfo.layerId); // 由于麻点图在放大平移时均会改变可见性，故有此函数
    pockingLayer.layerId = pockLayerInfo.layerId;
    pockingLayer.autoCalgraph = this.autoCalgraph;
    pockingLayer._echartsContainer.style.zIndex = styleModify.curZindex; // 为设置图层顺序调整特意设置
    styleModify.layerOrder[pockLayerInfo.layerId] = styleModify.curZindex;
    styleModify.curZindex -= 1;

    pockLayerInfo.name = data.name;
    pockLayerInfo.layer = pockingLayer;
    pockLayerInfo.type = 'pock';
    pockLayerInfo.show = data.showThumbnails !== false;
    pockLayerInfo.html = this.calgraph(pockLayerInfo.layerId);
    sgisLayerBase.setOverLayers(pockLayerInfo);
    // 为当前layer绑定设置颜色的方法
    pockingLayer.setCustomColor = this.setCustomColor;
    return pockLayerInfo;
  },
  layerRemoveCb(usedColor) {
    // 重置计数 减1
    if (this.layerNum > 1) {
      this.layerNum--;
    }
    this.colors.push(usedColor);
  },
  getColor() {
    let color = "";
    if (this.colors.length > 0) {
      color = this.colors[0];
      this.colors.splice(0, 1);
    }
    return color;
  },
  /**
   *
   * @param {Object} laryer
   * @param {String} colorParam
   */
  setCustomColor(laryer, colorParam) {
    const echart = laryer._ec;

    const option = {
      ...echart.getOption()
    };
    option.series[0].itemStyle.color = colorParam.colors[0];
    echart.setOption(option);
    laryer.autoCalgraph(laryer.layerId, colorParam.colors[0]);
  },
  /* *图层样式可见性设置函数 */
  setVisible(visible) {
    styleModify.setScatterVisible(visible, this.layerId, this._echartsContainer);
  },
  /* *设置图层透明度 */
  setOpacity(opacity) {
    this._echartsContainer.style.opacity = opacity;
  },
  /** 设置调整图层顺序函数*/
  setZIndexOffset(index) {
    styleModify.setZIndexOffset(index, this.layerId, this._echartsContainer);
  },
  /* *图例样式计算 */
  calgraph(layerId) {
    const itemColor = this.pointColor;
    const emphsisColor = 'red';
    const html = `
     <div class="${layerId}" style='text-align:center;padding:10px;line-height :50px'>
        <div style='display:inline-block;width:10px;height:10px;margin-right:20px;background:${itemColor};border-radius:10px' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
        <div style='display:inline-block;width:10px;height:10px;background:${itemColor};border-radius:10px;' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
        <div style='width:10px;height:10px;background:${itemColor};border-radius:10px' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
     </div>
    `;
    return html;
  },
  autoCalgraph(layerId, color) {
    const itemColor = color;
    const emphsisColor = 'red';
    const html = `
     <div class="${layerId}" style='text-align:center;padding:10px;line-height :50px'>
        <div style='display:inline-block;width:10px;height:10px;margin-right:20px;background:${itemColor};border-radius:10px' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
        <div style='display:inline-block;width:10px;height:10px;background:${itemColor};border-radius:10px;' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
        <div style='width:10px;height:10px;background:${itemColor};border-radius:10px' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
     </div>
    `;
    const layers = sgisLayerBase.overLayers;
    for (const key in layers) {
      if (layers[key].layerId === layerId) {
        layers[key].html = html;
      }
    }
  }
};
